<template>
  <div class="widthFull">
    <div class="car-head widthFull">
      <div class="icon-back"><span></span></div>
      <div class="car-head-title">购物车</div>
    </div>
    <div class="car-contenet">
      <div class="car-goods">
        <div class="goods-title">
          <span class="icon-dele" @click="alert"></span>
        </div>
        <label  class="goods-choice">
          <div class="goods-checkbox">
            <input type="checkbox"  class="tui-checkbox " />
          </div>
          <div class="goods-pic"><img src="../assets/car/pro3.jpg" /></div>
          <div class="goods-details">
            <div class="goods-name">蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml</div>
            <div class="spec">规格：红色，23</div>
            <div class="price-volume">
              <span class="unit-price">¥296</span
              ><span class="spinner"
                ><inputNumber class="inputNumber"></inputNumber
              ></span>
            </div>
          </div>
        </label>
      </div>
      <div class="car-goods">
        <div class="goods-title">
          <span class="icon-dele" @click="alert"></span>
        </div>
        <label  class="goods-choice">
          <div class="goods-checkbox">
            <input type="checkbox"  class="tui-checkbox " />
          </div>
          <div class="goods-pic"><img src="../assets/car/pro3.jpg" /></div>
          <div class="goods-details">
            <div class="goods-name">蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml</div>
            <div class="spec">规格：红色，23</div>
            <div class="price-volume">
              <span class="unit-price">¥296</span
              ><span class="spinner"
                ><inputNumber class="inputNumber"></inputNumber
              ></span>
            </div>
          </div>
        </label>
      </div>
    </div>
    <div class="pay widthFull">
      <label for="all-choice" class="all-choice"
        ><input
          type="checkbox"
          id="all-choice"
          class="all-choice-input"
        />全选</label
      >
      <div class="money">合计：<span>10000.00</span></div>
      <button class="balance" @click="to()">结算</button>
    </div>
  </div>
</template>
<style scoped>
  @import "../css/style.css";
  .car-head {
    height: 2.8rem;
    line-height: 2.8rem;
    top: 0;
    background-color: #3f3f3f;
    border-bottom: 0.06rem solid #e1e1e1;
    position: relative;
  }

  .car-head-title {
    text-align: center;
    font-size: 1rem;
    color: #fff;
  }
  .car-goods {
    height: 8.2rem;
    background-color: #fff;
    border: 0.08rem solid #e1e1e1;
    margin-bottom: 0.2rem;
  }
  .goods-title {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.8125rem;
    color: #999;
    border-bottom: 0.005rem solid #e5e5e5;
    padding: 0 1rem;
    text-align: justify;
  }
  .icon-dele {
    width: 1.25rem;
    height: 1.25rem;
    background: url(../assets/car/icon-dele.png) no-repeat;
    background-size: 1.25rem;
    margin-right: 2rem;
    float: right;
    margin-top: 0.3rem;
  }
  .goods-choice {
    padding: 0.5rem;
    height: 6.2rem;
    display: flex;
    justify-content: space-around;
  }
  .goods-checkbox {
    margin: auto;
    width: 6%;
  }
 
  .tui-checkbox:checked {
    background: #1673ff;
  }
  .tui-checkbox {
    width: 1.5rem;
    height: 1.5rem;
    background-color: #ffffff;
    border: solid 0.06rem #dddddd;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 0.8rem;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-appearance: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: background-color ease 0.1s;
    transition: background-color ease 0.1s;
  }
 
  .tui-checkbox:checked::after {
    content: "";
    top: 0.32rem;
    left: 0.32rem;
    position: absolute;
    background: transparent;
    border: #fff solid 0.12rem;
    border-top: none;
    border-right: none;
    height: 0.38rem;
    width: 0.63rem;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .goods-pic {
    width: 30%;
    margin-right: 0.625rem;
  }
  .goods-pic img {
    margin-top: 0.5rem;
    width: 4.8rem;
    height: 4.8rem;
  }
  .goods-details {
    width: 55%;
  }
  .goods-name {
    height: 2.4rem;
    font-size: 0.875rem;
    font-weight: normal;
    color: #232323;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .spec {
    font-size: 0.812rem;
    color: #454545;
    width: 100%;
    height: 1.6rem;
    line-height: 1.6rem;
  }
  .price-volume {
    height: 2rem;
  }
  .unit-price {
    color: #e21323;
    float: left;
  }
  .spinner {
    margin-top: -0.55rem;
    float: right;
  }
  .spinner .inputNumber {
    font-size: 0.9rem;
  }

  .pay {
    height: 2.5rem;
    line-height: 2.5rem;
    z-index: 9;
    bottom: 3rem;
    display: flex;
  }
  .all-choice {
    width: 30%;
    background: #ddd;
  }
  .all-choice-input {
    line-height: 2.5rem;
  }
  .money {
    width: 40%;
  }
  .money span {
    font-size: 1rem;
    font-weight: bold;
    color: #e21323;
  }
  .balance {
    width: 30%;
    font-size: 1rem;
    color: #fff;
    background-color: #e21323;
  }
</style>
<script>
  import inputNumber from "../components/inputNumber";
  
  export default {
    data() {
      return {
    
      };
    },
    components: {
      inputNumber
    },
    mounted() {
      
    },
    methods: {
      to() {
        this.$router.push({ name: "pay" });
      },
      alert() {
        let dialog = this.$dialog({
          state: true,
          message: "确定删除？",
          button:{
              comfirm: function () {
                  dialog.close().then(res=>{
                     console.log("你点击了确认")
                  });
              },
              cancel: function () {
                  dialog.close().then(res=>{
                     console.log("你点击了关闭")
                  });
              }
          }
        })
        
      },
     
    }
  };
</script>
